import React, { forwardRef, useId } from 'react';
import { StyledCheckboxRadio, StyledLabel } from '../common/CheckboxRadio.styled';
import { TRadioProps } from './Radio.types';

const Radio = forwardRef<HTMLInputElement, TRadioProps>((
    { label, ...nextProps }, ref) => {

    const radioId = useId();

    return (
        <>
            <StyledCheckboxRadio ref={ref} id={radioId} type="radio" {...nextProps} />
            <StyledLabel htmlFor={radioId}>{label}</StyledLabel>
        </>
    );
});

Radio.displayName = 'Radio';

export default Radio;
